import React from "react";
import useCounter from "./useCounter";
import { Button } from "@/components/ui/button";

const CounterComponent: React.FC = () => {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-4">计数器</h2>
      <p className="text-xl mb-4">当前计数: {count}</p>
      <div className="space-x-2">
        <Button onClick={increment}>增加</Button>
        <Button variant="outline" onClick={decrement}>
          减少
        </Button>
        <Button variant="secondary" onClick={reset}>
          重置
        </Button>
      </div>
    </div>
  );
};

export default CounterComponent;
